<template>
	<view class="container user-myland">
		<view class="seed-top">
			<view class="top-list" :class="selTop===idx&&'top-list-active'" v-for="(item,idx) in topList" :key="item.title"
				@click="selTopChange(idx)">{{item.title}}</view>
		</view>
		<view class="seed-main">
			<view class="page-list" v-for="(item,idx) in pageList" :key="item.recordId">
				<view class="list-top" @click="jumpDetail(item)">
					<image class="list-bg" :src="$fileUrl+'seed.png'" mode="aspectFill"></image>
					<view class="list-content">
						<view class="list-title">
							<text class="title-label">{{item.service?.serviceName}}</text>
							<text class="title-words">{{item.garden&&item.garden.gardenName}}</text>
						</view>
						<view class="list-info">
							<text class="list-info-title">到期日期：</text>
							<text>{{$format(item.endTime,'yyyy-MM-dd')}}</text>
						</view>
						<view class="list-info">
							<text class="list-info-title">租赁面积：</text>
							<text>{{item.garden&&item.garden.gardenArea}}m²</text>
						</view>
					</view>
				</view>

				<view class="list-bottom" v-if="item.status==='3'">
					<view class="list-status c-success"></view>
					<view class="yuan-btn btn-default">已完成</view>
				</view>
				<view class="list-bottom" v-else-if="item.status==='1'">
					<view class="list-status c-danger">待付款</view>
					<view class="yuan-btn btn-success-hollow" @click="clickCancel">取消订单</view>
					<view class="yuan-btn btn-success" @click="clickPay(item)">去付款</view>
				</view>
				<view class="list-bottom" v-else-if="item.status==='2'">
					<view class="list-status c-success">进行中</view>
					<view class="yuan-btn btn-success" @click="jumpDetail(item)">土地详情</view>
				</view>
				<view class="list-bottom" v-else-if="item.status==='4'">
					<view class="list-status c-danger">已取消</view>
				</view>
			</view>
			<view class="not-more" v-if="isLoading">加载中...</view>
			<view class="null-page" v-else-if="pageList.length<=0 ">
				<text class="iconfont">&#xe642;</text>
				<view class="null-page-tips">暂无数据~</view>
			</view>
			<view class="not-more" v-else-if="notMore">没有更多了...</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref, reactive } from 'vue';
	import api from '@/common/api';
	import { hideLoading, showLoading, showToast } from '@/common/util';
	import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
	const isLoading = ref(false)
	const topList = reactive([
		{ title: '全部',val:'' },
		{ title: '待付款', val: '1' },
		{ title: '进行中', val: '2' },
		{ title: '已完成', val: '3' },
	])
	const selTop = ref(0)
	const pageList = ref<any[]>([])
	const notMore = ref(true)

	onMounted(async () => {
		getPageList()
	})

	const pageSize = 10
	const pageNum = ref(1)
	const getPageList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const res = await api.getOrderList({
				pageNum: pageNum.value,
				pageSize,
				status:topList[selTop.value].val,
				type:'rent'
			})
			if (res.data.length < pageSize) notMore.value = true
			pageList.value = pageList.value.concat(res.data)
		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	const loadMore = () => {
		if (isLoading.value) return
		if (notMore.value) return
		pageNum.value = pageNum.value + 1
		getPageList()
	}
	const refreshList = () => {
		notMore.value = false
		pageNum.value = 1
		pageList.value = []
		getPageList()
	}
	onReachBottom(() => {
		// loadMore()
	})
	onPullDownRefresh(() => {
		refreshList()
		uni.stopPullDownRefresh()
	})
	const selTopChange=(idx)=>{
		selTop.value=idx
		refreshList()
	}
	const clickCancel=(item)=>{
		uni.showModal({
			title: '提示',
			content: '你确定要取消该订单吗？',
			confirmText: '确定',
			success: async (res) => {
				if (res.confirm) {
					showLoading()
					try {
						const res = await api.cancelOrder({
							recordId: item.recordId,
						})
						showToast('取消成功')
						refreshList()
					} finally {
						hideLoading()
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	const jumpDetail=(item)=>{
		uni.navigateTo({ url: '/pages/rent/detail?onlyShow=true&id='+item.rentLand.rentLandId })
		
	}
	
	const clickPay=async (item)=>{
		// 调起支付
		const payRes = await api.getPayRes({
			"totalFee": 0.01,//res.data.totalFee,
			"serialNumber":item.recordNo,
			"openid": item.weChatId
		})
		doPay({...payRes.data,orderId:item.recordId})
	}
	const doPay = (payData) => {
		wx.requestPayment({
			timeStamp: payData.timeStamp + '',
			nonceStr: payData.nonceStr,
			package: payData.package,
			signType: 'RSA',
			paySign: payData.paySign,
			success(res) {
				doPaySuccess(payData)
			},
			fail(res) {
				console.info(res)
			}
		})
	
	}
	const doPaySuccess = async (payData : any) => {
		payNum = 0
		// 多次查询后台支付是否成功
		showLoading({ title: '支付结果查询中，请稍后' })
		getPayStatus(payData)
	}
	let payNum = 0
	const getPayStatus = async (payData : any) => {
		payNum++
		const res = await api.getRentRecordById({ id:payData.orderId})
		if (res.data.status === '2') {
			//支付成功
			hideLoading()
			showToast('支付成功',{},()=>{
				refreshList()
			})
			
		} else {
			if (payNum >= 5) {
				hideLoading()
				showToast('支付结果查询失败，请联系客服或刷新界面查看结果',{},()=>{
					refreshList()
				})
				
			} else {
				setTimeout(() => {
					getPayStatus(payData)
				}, 1000)
			}
		}
	}
	
</script>

<style lang="scss">
	.user-myland {
		.seed-top {
			background-color: #fff;
		}

		.top-list {
			width: 25%;
			display: inline-block;
			border-bottom: solid 6rpx #fff;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 30rpx;
			color: #5B5B5B;
		}

		.top-list-active {
			font-weight: bold;
			color: #17CC77;
			border-bottom: solid 6rpx #17CC77;
		}

		.seed-main {
			padding: 20rpx;
		}

		.page-list {
			background-color: #fff;
			box-shadow: 0 8rpx 10rpx 0 rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;

		}

		.list-top {
			display: flex;
			align-items: center;
		}

		.list-bg {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
		}

		.list-content {
			flex-grow: 1;
			margin-left: 30rpx;
		}

		.list-title {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
		}

		.title-label {
			background-color: #17CC77;
			color: #fff;
			margin-right: 20rpx;
			padding: 0 20rpx;
			font-size: 26rpx;
			height: 46rpx;
			line-height: 46rpx;
			border-radius: 16rpx 0 16rpx 0;
		}

		.title-words {
			font-size: 34rpx;
			color: #232323;
		}

		.list-info {
			font-size: 30rpx;
			color: #232323;
			margin-top: 5rpx;
		}

		.list-info-title {
			color: #8F8F8F;
		}

		.list-bottom {
			padding-top: 15rpx;
			display: flex;
			align-items: center;
			border-top: solid 1px #eee;
			margin-top: 15rpx;

			.yuan-btn {
				width: 150rpx;
				height: 60rpx;
				border-radius: 60rpx;
				margin-left: 10rpx;
			}
		}

		.list-status {
			flex-grow: 1;
		}
	}
</style>